<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				whdth:300px;
				height: 300px;
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>
		 <!-- 1.按钮和DIV的单击事件（三种绑定方式） -->
		 <button id="btn1" onclick="btnClick(); type="button">按钮</button>
		 <div id="div1" onclick="btnClick();" onmouseenter="enterDiv()" onmouseleave="leveaDiv()" 
		 onmousemove="moveDiv()" ></div>
	</body>
	<script type="text/javascript">
	//1.1
		function btnClick(){
			console.log('成功')
		}
	//1.2
	    document.getElementById('btn1').onclick=btnClick;
		document.getElementById('div1').onclick=btnClick;
	//1.3
	    document.getElementById('btn1').addEventListener('click',btnClick)
		document.getElementById('div1').addEventListener('click',btnClick)
		// 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
	    function enterDiv(){
			console.log('进入DIV范围了')
		} 
		function leveaDiv(){
			console.log('离开DIV范围了')
		}
		function moveDiv(){
			console.log('别摸我')
		}
		// 3.登入页面
		// 用户名输入框，
		// 密码输入框，
		// 提交按钮
		<form method="post">
					用户名:<input type="text" id="username" value="" onfocus="enter()" onblur="leave()" /><br />
					密码:&nbsp;&nbsp;&nbsp;<input type="password" id="password" value="" onfocus="enterpsd()" onblur="leavepsd()"/><br />
					<button type="submit" onclick="tijiao()">提交按钮</button>
				</form>
		// 任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		function enter(){
					console.log("用户在输入名称")
				}
		
		//          3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		function leave(){
					let a = document.getElementById("username")
					if(a.value.length == ' ')
					{
						alert("没有输入用户名")
					}
				}
		
		//          3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		function enterpsd(){
					console.log("用户在输入密码")
				}
		        // 3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
				function leavepsd(){
					let a=document.getElementById("password")
					if(a.value.length == " "){
						alert("没有输入密码")
					}
				}
		
		//          3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		
		function leavepsd(){
					let a=document.getElementById("password")
					if(a.value.length == " "){
						alert("没有输入密码")
					}
				}
		//          3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		//               密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		function tijiao(){
					let a=document.getElementById("username")
					let b=document.getElementById("password")
					if(a.value.length == " " && b.value.length == " "){
					alert("用户名和密码为空")
					}
					if(a.value.length == " " ){
					alert("用户名为空")
					}
					if(b.value.length == " "){
					alert("密码为空")
					}
				}
		
		// 4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。
		function move(){
					console.log("我在DIV上移动监听")
				}
				function addListener(){
					document.getElementById("div3").addEventListener('mousemove',move)
				}
				function removeListener(){
					document.getElementById("div3").removeEventListener('mousemove',move)
				}
		
	</script>
</html>
